<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>蓝桥校园一卡通</title> 
	<link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/index.css" /> 
  </head> 
  <body>
    <div id="app"> 
		<div class="form">
			<div class="card" id="cardStyle">
				<div class="cardName">蓝桥校园一卡通</div>
				<div class="info">
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
				</div>
			</div>
			<div class="content">
				<div class="form-group">
				    <label for="name">姓名</label>
				    <input type="text" class="form-control" id="name" placeholder="请输入姓名" aria-describedby="inputSuccess2Status">
					<span id="vail_name" style="display: none;" class="help-block"> 姓名是2-4个汉字，请您检查输入的内容</span>
				</div>
				<div class="form-group">
				    <label for="studentId">学号</label>
				    <input type="number" class="form-control" id="studentId" placeholder="请输入学号">
					<span id="vail_studentId" style="display: none;" class="help-block"> 学号是1-12位的数字，请您检查输入的内容</span>
				</div>
				<div class="form-group">
				    <label for="college">学院</label>
				    <select id="college" class="form-control">
				      <option value="软件工程学院">软件工程学院</option>
				      <option value="信息技术学院">信息技术学院</option>
				      <option value="数字媒体学院">数字媒体学院</option>
				      <option value="计算机科学学院">计算机科学学院</option> 
				    </select>
				</div> 
				<button id="submit">制卡</button> 
			</div>
		</div>
    </div> 
    <script> 
	    // 获取DOM元素对象
		const name = document.getElementById("name");
		const studentId = document.getElementById("studentId");
		const college = document.getElementById("college");
		const submit = document.getElementById("submit");
		const cardStyle = document.getElementById("cardStyle");
		const item = document.querySelectorAll(".item")
		
		submit.onclick = () => {
			// TODO 验证用户输入
			if(/^[\u4e00-\u9fa5]{2,4}$/.test(name.value)) {
				document.querySelectorAll(".form-group")[0].classList.remove('has-error')
				document.getElementById("vail_name").style.display = 'none'
			}else{
				document.querySelectorAll(".form-group")[0].classList.add('has-error')
				document.getElementById("vail_name").style.display = 'block'
				return;
			}   
			if(/^\d{1,12}$/.test(studentId.value)) {
				document.querySelectorAll(".form-group")[1].classList.remove('has-error')
				document.getElementById("vail_studentId").style.display = 'none'
			}else{
				document.querySelectorAll(".form-group")[1].classList.add('has-error')
				document.getElementById("vail_studentId").style.display = 'block'
				return;
			}
			// TODO 填充一卡通的内容
			item[0].innerText = '姓名：' + name.value
			item[1].innerText = '学号：' + studentId.value
			item[2].innerText = '学院：' + college.value
			// 添加showCard类显示放大一卡通的动画
			cardStyle.classList.add('showCard') 
		}
      
    </script>
  </body>
</html>
